<template>
  <div>
    <transition name="slide-fade">
      <aside class="aside" :class="{ isTop: isTop }">
        <p class="aside-title">{{ title }}</p>
        <dl v-for="(item, i) in tempList" :key="i">
          <template v-if="item.children.length <= 0">
            <dt
              @click="handleActive3(item, i, 0)"
              :class="{ active: navActive[0] == i }"
            >
              <span class="m"
                ><i class="No">{{ Number(i) + 1 }}</i
                >{{ item.tname }}</span
              >
              <i
                v-if="item.children && item.children.length > 0"
                class="toggle-icon"
                :class="{
                  'el-icon-plus': !item.open,
                  'el-icon-minus': item.open,
                }"
              ></i>
            </dt>
          </template>
          <template v-else>
            <dt
              @click="openItems(item, i)"
              :class="{ active: navActive[0] == i }"
            >
              <span class="m"
                ><i class="No">{{ Number(i) + 1 }}</i
                >{{ item.tname }}</span
              >
              <i
                v-if="item.children && item.children.length > 0"
                class="toggle-icon"
                :class="{
                  'el-icon-plus': !item.open,
                  'el-icon-minus': item.open,
                }"
              ></i>
            </dt>
            <el-collapse-transition
              v-if="item.children && item.children.length > 0"
            >
              <dd v-show="item.open">
                <p
                  v-for="(ite, j) in item.children"
                  :key="j"
                  :class="{ active: navActive[0] == i && navActive[1] == j }"
                  :title="ite.tname"
                  @click="handleActive3(ite, i, j)"
                >
                  <i class="No">{{ Number(i) + 1 }}.{{ Number(j) + 1 }}</i
                  >{{ ite.tname }}
                </p>
              </dd>
            </el-collapse-transition>
          </template>
        </dl>
      </aside>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    tempList: {
      type: Array,
    },
  },
  data() {
    return {
      isTop: false,
      templ: [],
      navActive: [0, 0],
      title: "",
      tempId: "",
    };
  },
  watch: {
    tempList: {
      deep: true,
      handler: function(newData, oldData) {
        let a = (oldData && JSON.stringify(oldData)) || "";
        let b = (newData && JSON.stringify(newData)) || "";
        if (a != b) {
          // 判断数组是否相等，不相等则重置 默认展示第一张图
          // 默认选中第一个
          // this.$set(this.tempList[0], "open", true);
          // if (this.tempList[0].children.length <= 0) {
          //   this.handleActive3(this.tempList[0]);
          // }
          // console.log("tempList", this.tempList);
          this.getTempl();
        }
      },
    },
    // $route: {
    //   handler(nv) {
    //     this.tempId = nv.query.tempId;
    //   },
    //   immediate: true,
    //   deep: true
    // }
  },
  methods: {
    init() {
      this.tempId = this.$route.query.tempId;
      // console.log("this.tempId", this.tempId);
      this.ctNavID = String(this.$route.query.type);
      switch (this.ctNavID) {
        case "patent":
          this.title = "专利数据分析";
          break;
        case "paper":
          this.title = "论文数据分析";
          break;
        default:
      }
      // if (this.tempId) {
      //   for (let i in this.templ) {
      //     let children = this.templ[i].children;
      //     for (let j in children) {
      //       if (Number(children[j].id) === Number(this.tempId)) {
      //         this.$set(this.navActive, 0, Number(i));
      //         this.$set(this.navActive, 1, Number(j));
      //         return;
      //       }
      //     }
      //   }
      // }
      // this.$emit("navActive", this.navActive);
    },
    // 递归处理
    // funForIn(data, id) {
    //   for (let i = 0; i < data.length; i++) {
    //     if (data[i].children.length > 0) {
    //       return this.funForIn(data[i].children, id);
    //     } else {
    //       if (data[i].id == id) {
    //         return data[i];
    //       }
    //     }
    //   }
    // },
    getTempl() {
      let templ = JSON.parse(JSON.stringify(this.tempList));
      this.templ = templ;
      this.init();
      // 判断是否为无头浏览器 无头浏览器不能默认第一个，按照路由中的 tempId 的类型选取某一个templ
      let item = null,
        ii = 0,
        jj = 0;
      if (this.tempId) {
        // item = this.funForIn(this.templ, this.tempId);
        for (let i in this.templ) {
          let children = this.templ[i].children || [];
          if (children.length) {
            for (let j in children) {
              if (children[j].id == this.tempId) {
                this.$set(this.tempList[i], "open", true);
                item = children[j];
                // this.navActive = [i, j];
                ii = i;
                jj = j;
              }
            }
          } else {
            if (this.templ[i].id == this.tempId) {
              this.$set(this.tempList[i], "open", true);
              item = this.templ[i];
              // this.navActive = [i, 0];
              ii = i;
              jj = 0;
            }
          }
        }
      }
      // 否则按点击正常模式点击预览
      else {
        item = this.templ[0].children.length
          ? this.templ[0].children[0]
          : this.templ[0];
        // this.navActive = [0, 0];
        ii = 0;
        jj = 0;
        this.$set(this.tempList[0], "open", true);
      }
      // console.log("item", item);
      this.handleActive3(item, ii, jj);
      // this.$store.commit("setCurChartTempl", item);
      // let aggs = item && item.tdata.param.aggs;
      // let datatype = item && item.tdata.datatype;
      // let datefield = item && item.tdata.datefield;
      // this.$store.commit("setAnalysisScreen", {
      //   aggs,
      //   datatype,
      //   datefield,
      //   item_id: item.id,
      //   item_parentId: item.parentId,
      // });
    },
    openItems(item, i) {
      if (item.children && item.children.length == 0) {
        this.$store.commit("setCurChartTempl", this.templ[i]);
      } else {
        this.$set(this.tempList[i], "open", !this.tempList[i].open);
      }
    },
    // 点击菜单 - 2
    // handleActive2(i, j) {
    //   this.navActive = [i, j];
    //   console.log("this.templ", this.templ, i, j);
    //   let item = this.templ[i].children[j]
    //     ? this.templ[i].children[j]
    //     : this.templ[i];
    //   this.$router.push({
    //     name: "Analysis",
    //     query: {
    //       type: this.ctNavID,
    //       tempId: item.id,
    //     },
    //   });
    //   this.$store.commit("setCurChartTempl", item);
    //   let aggs = item.tdata.param.aggs;
    //   let datatype = item.tdata.datatype;
    //   let datefield = item.tdata.datefield;
    //   this.$store.commit("setAnalysisScreen", {
    //     aggs,
    //     datatype,
    //     datefield,
    //     item_id: item.id,
    //     item_parentId: item.parentId,
    //   });
    // },
    // 点击菜单 - 3
    handleActive3(item, i, j) {
      this.navActive = [i, j];
      let queryObj = this.$route.query;
      if (queryObj.export) {
        queryObj["tempId"] = item.id;
        this.$router.push({
          name: "Analysis",
          query: queryObj,
        });
      } else {
        this.$router.push({
          name: "Analysis",
          query: {
            type: this.ctNavID,
            tempId: item.id,
          },
        });
      }
      this.$store.commit("setCurChartTempl", item);
      let aggs = item.tdata.param.aggs;
      let datatype = item.tdata.datatype;
      let datefield = item.tdata.datefield;
      this.$store.commit("setAnalysisScreen", {
        aggs,
        datatype,
        datefield,
        item_id: item?.id,
        item_parentId: item?.parentId,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.aside {
  position: relative;
  width: calc(240px);
  height: calc(100vh - 0.7rem);
  background-color: $color4;
  overflow-y: auto;
  .aside-title {
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-weight: 700;
  }
  &.isTop {
    height: calc(100vh);
  }
  dt {
    position: relative;
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 20px;
    border-bottom: 1px solid $color142;
    cursor: pointer;
    .iconfont {
      margin-right: 10px;
      font-size: 20px;
      color: $color31;
    }
    .m {
      font-size: 12px;
      font-weight: 700;
      color: $color130;
      .No {
        display: inline-block;
        width: 20px;
        padding-right: 12px;
        text-align: center;
      }
    }
    .toggle-icon {
      position: absolute;
      top: 50%;
      right: 20px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      margin-top: -10px;
      text-align: center;
      font-size: 16px;
      color: $color133;
    }
  }
  dd {
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: $color2;
    p {
      line-height: 30px;
      padding: 0 20px;
      border-left: 3px solid transparent;
      margin-top: 0;
      margin-bottom: 0;
      font-size: 12px;
      color: $color6;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &.active {
        border-left-color: $mainColor;
        color: $color1;
        background-color: $color153;
      }
      .No {
        display: inline-block;
        width: 20px;
        padding-right: 12px;
        text-align: center;
      }
    }
  }
}
// animate
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  margin-left: -240px;
  opacity: 0;
}
</style>
